<template>
	<view>
		<navbar title="我处理的审批" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__t">
				<u-tabs :list="list4" lineWidth="26rpx" lineColor="#3262FD" :activeStyle="{
				            color: '#1E1E1E',
				            fontWeight: 'bold',
				        }" :inactiveStyle="{
				            color: '#949494',
							fontWeight: 'bold',
				        }" itemStyle="padding-left: 55rpx; padding-right: 55rpx; height: 56rpx;font-szie:30rpx;" @click="clicktab">
				</u-tabs>
			</view>
			<view class="con__b">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="con__list">
						<view class="con__list__item" v-for="(item,index) in list" :key="index"
							@click="navto('/pages/approval/details?id='+item.id)">
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="con__list__item__text">
									{{item.username}}
								</view>
								<view class="con__list__item__text">
									{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class="con__list__item__name" v-if="item.type==1">
								请假({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__list__item__name" v-if="item.type==2">
								外出({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__list__item__name" v-if="item.type==3">
								加班({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__list__item__name" v-if="item.type==4">
								其他审批
							</view>
							<view class="con__list__item__t" v-if="item.type==2">
								外出地点: {{item.form.addr}}
							</view>
							<view class="con__list__item__t" v-if="item.type==1">
								请假类型: {{item.form.type}}
							</view>
							<view class="con__list__item__t" v-if="item.type==2">
								外出类型: {{item.form.type}}
							</view>
							<view class="con__list__item__t" v-if="item.type==4">
								审批类型: {{item.form.type}}
							</view>
							<view class="con__list__item__t" v-if="item.type==2">
								随行同事: {{item.form.colleagues||'无'}}
							</view>
							<view class="con__list__item__t" v-if="item.type==2">
								拜访客户: {{item.form.customer||'无'}}
							</view>
							<view class="con__list__item__t" v-if="item.form.starttime">
								开始时间:
								{{$u.timeFormat(item.form.starttime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.starttime).getDay()]}}
								{{$u.timeFormat(item.form.starttime, 'hh:MM')}}
							</view>
							<view class="con__list__item__t" v-if="item.form.endtime">
								结束时间:
								{{$u.timeFormat(item.form.endtime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.endtime).getDay()]}}
								{{$u.timeFormat(item.form.endtime, 'hh:MM')}}
							</view>
							<view class="con__list__item__t" v-if="item.form.content">
								<text v-if="item.type==1">请假</text>
								<text v-if="item.type==2">外出</text>
								<text v-if="item.type==3">加班</text>
								<text v-if="item.type==4">其他</text>
								内容: {{item.form.content}}
							</view>
							<!-- <view v-for="(item1,index1) in item.form.images.split(',')" :key="index">
								
							</view> -->
							<view class="u-flex u-flex-y-center u-flex-wrap" v-if="item.form.images">
								<image :src="URL(item1)" @click.stop="preview(item.form.images.split(','),index1)"
									style="width: 149rpx;height: 149rpx;background-color: #ccc;border-radius: 15rpx;margin-right: 10rpx;"
									mode="aspectFit" v-for="(item1,index1) in item.form.images.split(',')"
									:key="index1"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				weeklist: ['日', '一', '二', '三', '四', '五', '六'],
				list4: [{
					name: '已通过',
					status: 2
				}, {
					name: '待我审批',
					status: 1
				}, {
					name: '已驳回',
					status: 3
				}, ],
				status: 2, //状态:1=待审批,2=通过,3=拒绝
				list: []
			};
		},
		methods: {
			clicktab(e) {
				this.status = e.status
				this.getlist()
			},
			async getlist() {
				let res = await sale.getExamMy({
					status: this.status
				})
				if (res.data.code == 1) {
					this.list = res.data.data
					this.list.map(t => {
						let a = t.form_json
						t.form = JSON.parse(a)
					})
				}
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		&__t {
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&__b {
			height: calc(100vh - 44px - var(--status-bar-height) - 104rpx - 42rpx);
			// background-color: #f8f8f8;
			padding: 0 30rpx 42rpx;
		}

		&__list {
			&__item {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 44rpx 36rpx 10rpx;

				&__text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 26rpx;
					margin-bottom: 40rpx;
				}

				&__name {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #010101;
					line-height: 30rpx;
					margin-bottom: 30rpx;
				}

				&__t {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #78797E;
					line-height: 26rpx;
					margin-bottom: 36rpx;
				}
			}
		}
	}
</style>